<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        ul{
            width: 1000px;
            min-width: 600px;
            list-style: none;  
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
      .big{
          width: 300px;
          height: 300px;
          position: absolute;
          display: none;
      }
    </style>
    <script>
        window.onload=function(){
     var imgs = document.querySelectorAll("li img");
     var big = document.querySelector(".big");
       for (let i = 0; i < imgs.length; i++) {
           imgs[i].onmousemove = function (e){
               big.style.top=e.y + 10 + "px";
               big.style.left=e.x + 10 + "px";
               big.src=this.src;
           }
           imgs[i].onmouseout =function(){
               big.style.display="none";
           }
           imgs[i].onmouseenter =function(){
               big.style.display="block";
           }
       }
        }
    </script>
</head>
<body>
    <ul>
        <li><img src="a/toplist_a01.jpg" alt=""></li>
        <li><img src="a/toplist_a02.jpg" alt=""></li>
        <li><img src="a/toplist_a03.jpg" alt=""></li>
        <li><img src="a/toplist_a04.jpg" alt=""></li>
        <li><img src="a/toplist_a05.jpg" alt=""></li>
    </ul>   
    <img  class="big" src="a/toplist_a01.jpg" alt="">
</body>
</html>